<template>
    <div>
        <div class="cat">
            <a 
            @click="setCurrentActiveStyle(999)"
            :class="currentIndex == 999 ? 'current-cat' : ''" href="javascript:;">全部</a>
            <a 
                :key="index"
                v-for="(item, index) in catList.value"
                :class="currentIndex == index ? 'current-cat' : ''"
                @click="setCurrentActiveStyle(index)" href="javascript:;">{{item}}</a>
        </div>
    </div>
</template>

<script>
import { ref, inject, provide } from '@vue/composition-api';

export default {
    setup(props, context) {
        // 当前导航的索引
        const currentIndex = ref(999);
        // 分类导航列表被点击时，切换导航的颜色
        const setCurrentActiveStyle = function (index) {

            // 把当前索引传递给父组件
           context.emit('setCurrentIndexCat', index);
            // 切换导航的颜色
           currentIndex.value = index;
           context.parent.$store.commit('setCurrentCat', index);
        }

        // 接受父组件的数据
        const catList = ref(inject('cat'));


        const methods = { setCurrentActiveStyle }

        return {
            ...methods,
            currentIndex,
            catList,
        }
    }
}
</script>

<style lang="less" scoped>
.cat {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #eee;
    text-align: center;
    a {
        font-size: 14px;
        font-weight: 700;
        margin: 0 12px;
        color: #595959;
        &:hover {
            color: #000;
        }
    }
}

.current-cat {
    color: #000!important;
}
</style>